<template>
  <view class="page">
    <view class="logo">
      <image src="http://zhibo1233.oss-accelerate.aliyuncs.com/c1/04471c8dff337ce772059acd15af7a.jpg" mode=""></image>
    </view>
    <!-- 填写区 -->
    <view class="input-info">
      <view class="info">
        <input type="tel" maxlength="11" v-model="form.phone" placeholder="手机号">
        <view class="more"></view>
      </view>
      <view class="info" :style="isLoginWay?'':'display: none'">
        <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
        <view class="more">
          <text class="mo">获取验证码</text>
          <text class="mo" style="display: none">59秒后重试</text>
        </view>
      </view>
      <view class="info" :style="isLoginWay?'display: none':''">
        <input :password='!isPassword' v-model="form.password" maxlength="26" placeholder="请输入密码">
        <view class="more">
          <text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'" @click="isPassword = !isPassword"></text>
          <text class="mo" @click="goUrl('/pages/ChangePassword/ChangePassword')">忘记密码</text>
        </view>
      </view>
	  <view class="login_agree uni-flex" style=" padding-bottom: 5px;box-sizing: border-box;width: 660rpx;margin: 20rpx auto;display: flex;align-items: center;" @click="get_check">
	  	<text style="margin-right: 10rpx;margin-top: 10rpx;" :class="is_check?'iconfont icon-checked red':'iconfont icon-check'"></text>
	  	<view class="" style="padding-top: 6rpx;">我已阅读并同意 <text style="color: #f20;;" @click.stop="goUrl('/pages/Setting/xieyi?type=1')">《用户协议》</text>和<text style="color: #f20;;" @click="goUrl('/pages/Setting/xieyi?type=2')">《隐私政策》</text></view>
	  </view>
    </view>
    <!-- 按钮 -->
    <view class="btn-info">
      <view class="btn" :style="isLogin?'opacity:1':'opacity:0.4'" @click="tui.dianji(onLogin)">
        <text>登录</text>
      </view>
    </view>
    <!-- 操作 -->
    <view class="operation">
      <!-- <text @click="onLoginCut">{{isLoginWay?'手机号密码登录':'短信验证码登录'}}</text> -->
	  <text @click="onLoginCut"></text>
      <text @click="onRegister">新用户注册</text>
    </view>
    <!-- 其他方式登录 -->
    <view class="other-ways">
      <text>其他登录方式</text>
    </view>
    <!-- 登录方式 -->
    <view class="login-way">
      <view class="way">
        <image src="/static/wx_ico.png" mode=""></image>
        <text>微信登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      isLoginWay: false,
	  is_check:false,
      isPassword: false,
      // 表单
      form:{
        phone: '',
        code: '',
        password: '',
      },
    };
  },
  methods:{
    onRegister(){
      uni.navigateTo({
        url: '/pages/register/register'
      })
    },
	get_check(){
		this.is_check = !this.is_check
	},
	goUrl(e){
		this.tui.href(e)
	},
    /**
     * 登录切换
     */
    onLoginCut(){
      this.isLoginWay = !this.isLoginWay;
      // 验证码
      if(this.isLoginWay){
        this.isLogin = this.form.code && this.form.phone ? true : false;
      }
      // 账号密码
      if(!this.isLoginWay){
        this.isLogin = this.form.password && this.form.phone ? true : false;
      }
    },
    /**
     * 登录点击
     */
    onLogin(){
		let that = this
		if(!that.is_check){
			that.tui.toast('请先阅读并勾选用户隐私协议')
			return
		}
		that.is_check = true
		that.tui.request("api.login/in", "POST", that.form, false, false, false).then((res) => {
			that.tui.toast(res.info)
			if(res.code==1){
				uni.setStorageSync('d_token', res.data.token)
				setTimeout(() => {
					uni.switchTab({
						url:'/pages/home/home'
					})
				}, 1000)
			}
			setTimeout(() => {
				that.is_check = false
			}, 3000)
		}).catch((res) => {
			
		})
    }
  },
  watch:{
    form:{
      handler(newValue, oldValue) {
        // 验证码
        if(this.isLoginWay){
          this.isLogin = newValue.code && newValue.phone ? true : false;
        }
        // 账号密码
        if(!this.isLoginWay){
          this.isLogin = newValue.password && newValue.phone ? true : false;
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
@import 'login.scss';
</style>
